<template>
    <div class="svg inline" ref="iRef">
    </div>
</template>

<script lang="ts" >
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
    props: {
        src: String
    },
    setup(props) {
        const iRef = ref<HTMLElement>()
        async function refresh(src: string) {
            const res = await fetch(src, { method: 'GET' })
            const parser = new DOMParser()
            const svgdom = parser.parseFromString(await res.text(), 'image/svg+xml')
            const i = iRef.value!
            const root = i.attachShadow({ mode: 'open' })
            root.appendChild(svgdom.documentElement)
            const style = document.createElement('style')
            style.textContent = `
                svg {
                    height: inherit;
                    width: inherit;
                }
            `
            root.appendChild(style)
        }
        onMounted(() => {
            if (props.src) {
                refresh(props.src)
            }
        })
        return {
            iRef
        }
    }
})
</script>

<style scoped>
</style>